<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Delete, Edit } from "@element-plus/icons-vue";

// 导航栏
import { ComponentSize, ElMessage } from "element-plus";
import {
  addFoodService,
  deleteFoodByIdService,
  editFoodService,
  getFoodByIdService,
} from "@/api/root/food";
import {
  addService,
  deleteByIdService,
  editService,
  getByIdService,
  listByPageService,
} from "@/api/root/type";
const currentPage = ref(1); //当前页数
const pageSize = ref(7); //每页条数
const total = ref(100); //总条数

const size = ref<ComponentSize>("large");
const background = ref(true);
const disabled = ref(false);

const handleCurrentChange = (num) => {
  //页数改变触发函数
  currentPage.value = num;
  listByPage();
};

const slider = ref([0, 1000]); //滑块查询-最大最小价格
let typeData = ref([]); //食物数据列表

//条件分页获取职位列表
const listByPage = async () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
    minPrice: slider.value[0],
    maxPrice: slider.value[1],
  };
  let result = await listByPageService(params);
  typeData.value = result.data.items;
  total.value = result.data.total;
};
listByPage();

//重置滑块和列表
const resetSlider = () => {
  slider.value = [0, 500];
  currentPage.value = 1;
  listByPage();
};

//客户信息修改表单
const title = ref("");
const editFormVisible = ref(false);
import type { FormInstance, FormRules } from "element-plus";

const ruleFormRef = ref<FormInstance>();

const validateName = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("职位名称不能设置为空"));
  } else {
    callback();
  }
};
const validateMoney = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("职位价格不能设置为空"));
  } else {
    callback();
  }
};

const typeForm = ref({
  id: "",
  name: "",
  money: "",
});

const rules = ref<FormRules<typeof typeForm>>({
  name: [{ validator: validateName, trigger: "blur" }],
  money: [{ validator: validateMoney, trigger: "blur" }],
});

//打开编辑表单
const editForm = async (id) => {
  let result = await getByIdService(id);
  typeForm.value = result.data;
  title.value = "编辑职位信息";
  editFormVisible.value = true;
};
//清空表单函数
const clearForm = () => {
  ruleFormRef.value.resetFields();
  typeForm.value = {
    id: "",
    name: "",
    money: "",
  };
};

//信息修改函数
const edit = () => {
  ruleFormRef.value.validate(async (v) => {
    if (v) {
      await editService(typeForm.value);
      editFormVisible.value = false;
      ElMessage.success("修改成功");
      listByPage();
    } else {
      ElMessage.error("请按照规范填写");
    }
  });
};

//新增信息函数
const add = () => {
  ruleFormRef.value.validate(async (v) => {
    if (v) {
      await addService(typeForm.value);
      editFormVisible.value = false;
      ElMessage.success("新增成功");
      listByPage();
    } else {
      ElMessage.error("请按照规范填写");
    }
  });
};

//通过id删除信息函数
const deleteById = async (id) => {
  await deleteByIdService(id);
  ElMessage.success("删除成功");
  listByPage();
};


//类型柱状图
import * as echarts from "echarts";
const charts = ref();
//柱状图函数
const WeCharts = async () => {
  await listByPage();

  let myChart = echarts.init(charts.value);
  myChart.setOption({
    title: {
      text: "当前页类型职位单价对比表",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: typeData.value.map((item) => item.name),
    },
    series: [
      {
        name: "单价/h",
        type: "bar",
        data: typeData.value.map((item) => item.money),
      },
    ],
  });
};
onMounted(async () => {
  WeCharts();
});
</script>

<template>
  <div style="display: flex; justify-content: space-around">
    <el-card style="min-width: 600px">
      <!-- 价格范围滑块控制器 -->
      <div class="slider-demo-block">
        <div>范围：</div>
        <el-slider
          v-model="slider"
          range
          show-stops
          :step="10"
          :max="500"
          @change="listByPage()"
        />
      </div>
      <!-- 添加食物、重置范围滑块按钮 -->
      <div style="display: flex; justify-content: flex-end">
        <div style="margin-right: 30px">
          <el-button
            type="primary"
            @click="
              title = '新增职位信息';
              editFormVisible = true;
              clearForm();
            "
            >新增</el-button
          >
        </div>
        <div><el-button type="info" @click="resetSlider()">重置</el-button></div>
      </div>
      <el-table :data="typeData" stripe style="width: 580px; height: 380px">
        <el-table-column prop="id" label="编号" width="144" />
        <el-table-column prop="name" label="名称" width="144" />
        <el-table-column prop="money" label="单价" width="144" />
        <el-table-column label="操作" width="144">
          <template #default="{ row }">
            <el-button type="primary" :icon="Edit" circle @click="editForm(row.id)" />
            <el-popconfirm
              title="确定要删除该数据吗？"
              @cancel="ElMessage('您取消了删除')"
              @confirm="deleteById(row.id)"
            >
              <template #reference>
                <el-button type="danger" :icon="Delete" circle />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 导航栏 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <div ref="charts" style="min-width: 600px; height: 500px"></div>
  </div>

  <!-- 类型信息修改、新增表单 -->
  <el-dialog v-model="editFormVisible" :title="title" width="500">
    <el-form :model="typeForm"> </el-form>
    <template #footer>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px; padding-left: 100px"
        :model="typeForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="名称：" prop="name">
          <el-input v-model="typeForm.name" autocomplete="off" style="width: 200px" />
        </el-form-item>
        <el-form-item label="价格：" prop="money">
          <el-input
            v-model="typeForm.money"
            autocomplete="off"
            type="number"
            style="width: 200px"
          />
        </el-form-item>
      </el-form>

      <div class="dialog-footer">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click="title == '编辑职位信息' ? edit() : add()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
